/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity
} from 'react-native';

import {Router,Scene,Reducer} from 'react-native-router-flux'
import login from './Src/Page/LoginItem/Login'
import homePage from './Src/Page/HomeItem/HomeAboutPage'
import minePage from './Src/Page/MineItem/MineAboutPage'

const reducerCreate = params => {
    const defaultReducer = Reducer(params);
    return (state, action) => {
        console.log("ACTION:", action);
        return defaultReducer(state, action);
    }
};

class RNProjBaseConfig extends Component {
    render() {
        return (
            <Router createReducer={reducerCreate} >
                <Scene key="login" title="Login" component={login} />
                <Scene key='root' type="reset" >
                    <Scene key="tabBarCon" tabs={true}
                           tabBarStyle={{backgroundColor:'orange',height:49}}
                    >
                        <Scene key="home" title="home" component={homePage} icon={TabBarCom}/>
                        <Scene key="mine" title="mine"  component={minePage} icon={TabBarCom}/>
                    </Scene>
                </Scene>

            </Router>
        );
    }
}

class TabBarCom extends Component{
    render(){
        return(
            <Text>
                {this.props.title}
            </Text>
        )
    }
}
export default RNProjBaseConfig;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});
